/*
 HMR: hot module replacement,热模块替换，也叫模块热替换
 作用：一个模块发生变化，只会重新打包这一个模块（而不是打包所有模块）
 极大的提升构建速度。

 （1）样式文件：可以使用HMR功能，因为style-loader内部实现了。
 （2）js文件：默认不能使用HMR功能==》需要修改js代码,添加支持HMR功能的代码
    注意：HMR功能对js的处理，只能处理非入口js文件的其他文件。
 （3）html文件：默认不能使用HMR功能，同时会导致一个问题：html文件不能热更新了（因为只有一个html页面，不用做HMR）
    解决：修改entry入口，将html文件引入（此时还是不能热模块替换）

*/


const { resolve } = require('path');
const htmlWebpackPlugins = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    // entry: [
    //     './src/index.js',
    //     './src/index.html'
    // ],
    output:{
        filename: 'built.js',
        path: resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                // 表示匹配哪些文件(以.css结尾)
                test: /\.css$/,
                // 使用哪些loader进行处理
                use:[
                    // use数组中loader执行顺序，从右到做，从下到上，依次执行
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
                    'css-loader'
                ]
            },
            {
                // 表示匹配哪些文件(以.less结尾)
                test: /\.less$/,
                // 使用哪些loader进行处理
                use:[
                    // use数组中loader执行顺序，从右到做，从下到上，依次执行
                    // 创建style标签，将js中的样式资源插入进行，添加到head中生效
                    'style-loader',
                    // 将css文件变成commonjs模块加载到js中，里面的内容是样式字符串
                    'css-loader',
                    // 将less文件编译成css文件
                    // 需要下载less-loader和less
                    'less-loader',
                ]
            },
            
            // 配置url-loader后打包，发现有两个图片出不来，如果不要这个loader可以正常显示（后期确认）
            // {
            //     // 处理图片资源
            //     test: /\.(jepg|png|jpg|gif)$/,
            //     // 使用一个loader
            //     // 下载url-loader  file-loader
            //     loader: 'url-loader',
            //     options:{
            //         // 图片大小小于8kb，就会被base64处理
            //         // 优点：减少请求数量（减轻服务器的压力）
            //         // 缺点：图片体积会更大（文件请求速度更慢）
            //         limit: 4 * 1024
            //     }
            // },
            // 打包其他资源（在这个demo中，除了js，css，html资源以外的，都为其他资源，所以可以用排除法）
            {
                exclude:/\.(js|css|less|html)$/,
                loader: 'file-loader',
                // outputPath: 'assets'
            }
        ]

    },
    plugins:[
        new htmlWebpackPlugins({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer:{
        contentBase: resolve(__dirname,'build'),
        port: 3000,
        open: true,
        compress: true,
        // 开启HMR功能
        // 当修改了webpack配置，新配置想要生效，必须重启webpack服务
        hot: true,
    }
}